<template>
    <div class="ma-content-block lg:flex justify-between p-4">
        <div class="app-container">
            <div class="container-header">
                <div class="container-header-tr">
                    <div>
                        <span class="s1"
                            ><span
                                style="
                                    color: red;
                                    position: relative;
                                    top: 2px;
                                    margin-right: 2px;
                                "
                                >*</span
                            >{{ $t('basics.renwumingchen') }}</span
                        >
                        <p>
                            <a-input
                                v-model="forms.task_name"
                                :placeholder="$t('basics.renwumingchenText')"
                            />
                        </p>
                    </div>
                    <div>
                        <span class="s1"
                            ><span
                                style="
                                    color: red;
                                    position: relative;
                                    top: 2px;
                                    margin-right: 2px;
                                "
                                >*</span
                            >{{ $t('basics.xiangmu') }}</span
                        >
                        <p>
                            <a-input v-model="projectName" disabled />
                        </p>
                    </div>
                    <div>
                        <a-popover po1ition="bottom">
                            <div>
                                <img
                                    src="@/assets/images/waring.png"
                                    alt=""
                                    style="height: 24px; cursor: pointer"
                                />
                            </div>
                            <template #content>
                                <div class="tem-txt">
                                    <p>
                                        {{ $t('basics.uploadTips') }}
                                    </p>
                                </div>
                            </template>
                        </a-popover>
                    </div>
                    <div>
                        <a-popover position="top">
                            <a-button
                                @click="importButton"
                                type="primary"
                                class="w-full lg:w-auto mt-2 lg:mt-0"
                            >
                                <img
                                    src="@/assets/images/ic_shangc.png"
                                    alt=""
                                    style="
                                        cursor: pointer;
                                        width: 13px;
                                        height: 13px;
                                        margin-right: 6px;
                                    "
                                />{{ $t('basics.UploaDtheTask') }}
                            </a-button>
                            <template #content>
                                <div class="tem-txt">
                                    <p>{{ $t('basics.textOne') }}</p>
                                    <p>{{ $t('basics.textTwo') }}</p>
                                </div>
                            </template>
                        </a-popover>
                    </div>
                    <div>
                        <div class="txt-div mr20">
                            {{ $t('basics.maxNumbr') }} :&nbsp;&nbsp;<span
                                style="color: red; font-weight: bold"
                                >{{ numList.num_of_message_available }}</span
                            >
                        </div>
                        <div class="txt-div">
                            {{ $t('basics.kscrwzhs') }}:&nbsp;&nbsp;<span
                                style="color: red; font-weight: bold"
                                >{{ accountNumber }}</span
                            >
                        </div>
                    </div>
                </div>
            </div>
            <div class="container-content-table">
                <div
                    class="container-content-header"
                    style="
                        display: flex;
                        justify-content: flex-start;
                        line-height: 50px;
                        font-size: 16px;
                        font-weight: bold;
                    "
                >
                    <span class="tasks" v-if="appStore.language == 'zh_CN'">
                        <span class="text-[red] mr6">{{ username }}</span>
                        <span>{{ $t('basics.derenwu') }}</span>
                    </span>
                    <span class="tasks" v-else>
                        <span>{{ $t('basics.derenwu') }}</span>
                        <span class="text-[red]">{{ username }}</span>
                    </span>
                </div>
                <a-table
                    :columns="taskColumns"
                    :data="objValue"
                    v-model:selectedKeys="selectedKeys"
                    row-key="id"
                    @selection-change="getRowData"
                    :pagination="false"
                >
                    <template #status="{ record }">
                        {{ getStatus(record.status) }}
                    </template>
                    <template #operate="{ record }">
                        <div style="display: flex">
                            <a-link
                                v-if="record.status == 1"
                                :disabled="disable"
                                @click="
                                    taskOperation('start', record, 'kaishi')
                                "
                            >
                                <icon-plus />{{ $t('basics.kaishi') }}</a-link
                            >
                            <a-link
                                v-if="record.status == 2"
                                :disabled="disable"
                                status="danger"
                                @click="
                                    taskOperation('stop', record, 'tingzhi')
                                "
                            >
                                {{ $t('basics.tingzhi') }}</a-link
                            >
                            <a-link
                                v-if="record.status == 6"
                                :disabled="disable"
                                @click="
                                    taskOperation('continue', record, 'jixu')
                                "
                            >
                                {{ $t('basics.jixu') }}</a-link
                            >
                            <a-link
                                v-if="record.status == 3 || record.status == 6"
                                status="danger"
                                :disabled="disable"
                                @click="
                                    taskOperation('delete', record, 'shanchu')
                                "
                            >
                                {{ $t('basics.shanchu') }}</a-link
                            >
                        </div>
                    </template>
                </a-table>
            </div>
            <div class="container-header mt20">
                <div class="container-header-tr">
                    <div>
                        <span class="s1">{{ $t('basics.accName') }}</span>
                        <p>
                            <a-input
                                v-model="form.username"
                                :placeholder="$t('basics.textAc')"
                            />
                        </p>
                    </div>
                    <div>
                        <span class="s1">{{ $t('basics.status') }}</span>
                        <p>
                            <a-select
                                v-model="form.status"
                                style="width: 120px"
                                :placeholder="$t('basics.textStatus')"
                                allow-clear
                            >
                                <a-option
                                    :label="$t('basics.zhengchang')"
                                    :value="1"
                                ></a-option>
                                <a-option
                                    :label="$t('basics.tingyong')"
                                    :value="2"
                                ></a-option>
                            </a-select>
                        </p>
                    </div>
                    <div>
                        <div class="mr20">
                            <a-button
                                @click="searchButton"
                                type="primary"
                                class="w-full lg:w-auto mt-2 lg:mt-0"
                            >
                                <icon-search class="mr6" />{{
                                    $t('basics.search')
                                }}
                            </a-button>
                        </div>
                        <a-button
                            type="secondary"
                            @click="refresh"
                            class="w-full lg:w-auto mt-2 lg:mt-0"
                        >
                            <template #icon>
                                <icon-refresh />
                            </template>
                            {{ $t('basics.shuaxin') }}
                        </a-button>
                    </div>
                </div>
            </div>
            <div class="container-content-table mt20">
                <a-table
                    :columns="columns"
                    :data="tableList"
                    v-model:selectedKeys="selectedKeys"
                    row-key="id"
                    @selection-change="getRowData"
                    :pagination="false"
                >
                    <template #status="{ record }">
                        <span v-if="record.status == 1">{{
                            $t('basics.zhengchang')
                        }}</span>
                        <span v-if="record.status == 2">{{
                            $t('basics.tingyong')
                        }}</span>
                    </template>
                    <template #num_of_pop="{ record }">
                        {{
                            record.num_of_reply_conversion
                                ? (
                                      (record.num_of_reply_conversion /
                                          record.num_of_pop) *
                                      100
                                  ).toFixed(2)
                                : 0
                        }}%
                    </template>
                    <template #operate="{ record }">
                        <a-link
                            status="danger"
                            @click="toConversation(record.user_id)"
                        >
                            {{ $t('basics.inTalk') }}</a-link
                        >
                    </template>
                    <template #num_of_reply_conversion="{ record }">
                        <span>{{ computerNum(record) }}</span>
                    </template>
                </a-table>
                <div class="_crud-footer mt-3 text-right" ref="crudFooterRef">
                    <a-pagination
                        :total="pageList.total"
                        show-total
                        show-jumper
                        show-page-size
                        @page-size-change="getList"
                        @change="getList"
                        v-model:current="form.page"
                        v-model:page-size="form.pageSize"
                        style="display: inline-flex"
                        :page-size-options="[10, 20, 50, 100]"
                        :default-page-size="100"
                    />
                </div>
            </div>
            <ma-import
                :render-to-body="false"
                ref="crudImportRefs"
                :upLoadData="importFile"
                @success="refresh"
            />
        </div>
    </div>
</template>
<script setup>
import { ref, getCurrentInstance, onBeforeUnmount } from 'vue';
import { getProjectId } from '@/api/cloud/userProject.js';
import {
    getSonUserTaskList,
    getNum,
    getGroupTask,
    groupTaskActions,
    getNumOfUseAbleStaff
} from '@/api/america/usertask.js';
import { Message } from '@arco-design/web-vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import getUserInfo from '@/store/modules/user';
import { useAppStore } from '@/store';
import MaImport from './components/import.vue';
const router = useRouter();
const { t } = useI18n();
const username = getUserInfo().user.username;
const { proxy } = getCurrentInstance();
const selectedKeys = ref([]);
const appStore = useAppStore();
const disable = ref(false);
const forms = ref({});
const projectName = ref();
const accountNumber = ref(0);
const crudImportRefs = ref();
const loading = ref(false);
const objValue = ref([]);
const importFile = ref({
    url: 'client/groupTask/add',
    params: forms.value
});
//   导入成功后
const refresh = () => {
    getNumOfUseAbleStaff({ project_id: forms.value.project_id }).then((res) => {
        accountNumber.value = res.data.num || 0;
        getGroupTask({ project_id: forms.value.project_id }).then((res) => {
            getList();
            getNumList();
            if (res.data.id) {
                objValue.value = [res.data];
            } else {
                objValue.value = [];
            }
        });
    });

    getNumList();
};

const taskOperation = (text, item, modeals) => {
    proxy.$modal.warning({
        title: t('basics.xitongtishi'),
        content: t('basics.ninuqeding') + t(`basics.${modeals}`) + '?',
        hideCancel: false,
        cancelText: t('basics.concel'),
        okText: t('basics.sure'),
        simple: false,
        onOk: () => {
            disable.value = true;
            groupTaskActions({ id: item.id, action: text }).then((res) => {
                Message.success(res.message);
                disable.value = false;
                getId();
                getList();
            });
        }
    });
};
const getStatus = (number) => {
    //   1未开始;显示开始按钮
    // 2进行中;显示停止按钮
    // 6 停止中 显示继续按钮和删除按钮
    // 3 已完成显示 删除按钮

    switch (number) {
        case 0:
            return t('basics.UpCross');
        case 1:
            return t('basics.NotYetStarted');
        case 2:
            return t('basics.UnderWay');
        case 3:
            return t('basics.completed');
        case 4:
            return t('basics.TaskProcessing');
        case 5:
            return t('basics.TaskProcessing');
        case 6:
            return t('basics.stop');
        case 7:
            return t('basics.InOperation');
        case 3:
            return t('basics.CompletedDisplay');

        default:
            console.log('Default');
    }
};
let timer = setInterval(() => {
    getNumOfUseAbleStaff({ project_id: forms.value.project_id }).then((res) => {
        accountNumber.value = res.data.num || 0;
        getGroupTask({ project_id: forms.value.project_id }).then((res) => {
            if (res.data.id) {
                objValue.value = [res.data];
            } else {
                objValue.value = [];
            }
        });
    });
}, 5000);

// 获取美国短信id
const getId = () => {
    getProjectId({ project_key: 'america' }).then((res) => {
        forms.value.project_id = res.data.id;
        projectName.value = res.data.project_name;
        getNumOfUseAbleStaff({ project_id: forms.value.project_id }).then(
            (res) => {
                accountNumber.value = res.data.num || 0;
                getGroupTask({ project_id: forms.value.project_id }).then(
                    (res) => {
                        if (res.data.id) {
                            objValue.value = [res.data];
                        } else {
                            objValue.value = [];
                        }
                    }
                );
            }
        );
    });
};

const importButton = (params) => {
    if (forms.value.task_name) {
        crudImportRefs.value.open();
    } else {
        proxy.$message.error(t('basics.renwumingchenText'));
    }
};

const computerNum = (record) => {
    if (record.num_of_success) {
        let total =
            (
                (record.num_of_reply_conversion / record.num_of_success) *
                100
            ).toFixed(2) + '%';
        // return total
        if (total > 100) {
            return 100 + '%';
        } else {
            return total;
        }
    } else {
        return 0;
    }
};
const form = ref({
    username: '',
    status: '',
    page: 1,
    pageSize: 100
});
const tableList = ref([]);
const pageList = ref({
    total: 0
});

// 获取列表数据
const getList = () => {
    loading.value = true;
    getSonUserTaskList(form.value).then((res) => {
        tableList.value = res.data.items;
        pageList.value = res.data.pageInfo;
        loading.value = false;
    });
};
const numList = ref({});
const columns = ref([]);
const taskColumns = ref([
    {
        title: t('basics.xuhao'),
        dataIndex: 'id',
        minWidth: 100,
        slotName: 'id',
        align: 'left'
    },
    {
        title: t('basics.createAt'),
        dataIndex: 'created_at',
        minWidth: 100,
        align: 'left'
    },
    {
        title: t('basics.renwumingchen'),
        dataIndex: 'task_name',
        minWidth: 100,
        align: 'left'
    },
    {
        title: t('basics.UploadQuantity'),
        dataIndex: 'num',
        minWidth: 100,
        align: 'left'
    },
    {
        title: t('basics.chenggongshuliang'),
        dataIndex: 'num_of_pop',
        minWidth: 100,
        align: 'left'
    },
    {
        title: t('basics.status'),
        dataIndex: 'status',
        minWidth: 100,
        slotName: 'status',
        align: 'left'
    },
    {
        title: t('basics.controls'),
        dataIndex: 'operate',
        width: 150,
        align: 'left',
        slotName: 'operate'
    }
]);

columns.value = [
    {
        title: t('basics.account'),
        dataIndex: 'username',
        minWidth: 100,
        slotName: 'username',
        align: 'left'
    },
    {
        title: t('basics.createAt'),
        dataIndex: 'created_at',
        align: 'left',
        minWidth: 200
    },
    {
        title: t('basics.fenpeishuliang'),
        dataIndex: 'num_of_assign_message',
        minWidth: 150,
        align: 'left',
        slotName: 'num_of_assign_message'
    },
    // {
    //   title: t('basics.fsSum'),
    //   dataIndex: 'num_of_assign_message',
    //   minWidth:150,
    //   slotName: 'num_of_assign_message'
    // },
    {
        title: t('basics.fsSecc') + numList.num_of_assign_message,
        dataIndex: 'num_of_success',
        minWidth: 150,
        align: 'left',
        slotName: 'num_of_success'
    },
    {
        title: t('basics.UploadQuantity'),
        dataIndex: 'num_of_need_message',
        minWidth: 150,
        align: 'left',
        slotName: 'num_of_need_message'
    },
    {
        title: t('basics.huifu'),
        dataIndex: 'num_of_reply_conversion',
        minWidth: 150,
        align: 'left'
    },
    {
        title: t('basics.huifuNum'),
        dataIndex: 'num_of_reply',
        minWidth: 150,
        align: 'left',
        slotName: 'num_of_reply_conversion'
    },

    {
        title: t('basics.status'),
        dataIndex: 'status',
        minWidth: 150,
        align: 'left',
        slotName: 'status'
    },
    {
        title: t('basics.controls'),
        dataIndex: 'operate',
        width: 150,
        align: 'left',
        slotName: 'operate'
    }
];

const getNumList = () => {
    getNum().then((res) => {
        numList.value = res.data;

        columns.value = [
            {
                title: t('basics.account'),
                dataIndex: 'username',
                minWidth: 100,
                slotName: 'username',
                align: 'left'
            },
            {
                title: t('basics.createAt'),
                dataIndex: 'created_at',
                align: 'left',
                minWidth: 200
            },

            {
                title:
                    t('basics.fenpeishuliang') +
                    ' ' +
                    numList.value.num_of_assign_message,
                dataIndex: 'num_of_assign_message',
                minWidth: 150,
                align: 'left',
                slotName: 'num_of_assign_message'
            },
            {
                title:
                    t('basics.UploadQuantity') +
                    '  ' +
                    numList.value.num_of_need_message,
                dataIndex: 'num_of_need_message',
                minWidth: 150,
                align: 'left',
                slotName: 'num_of_need_message'
            },
            // {
            //   title: t('basics.fsSum'),
            //   dataIndex: 'num_of_assign_message',
            //   minWidth:150,
            //   slotName: 'num_of_assign_message'
            // },
            {
                title: t('basics.fsSecc') + '  ' + numList.value.num_of_success,
                dataIndex: 'num_of_pop',
                minWidth: 150,
                align: 'left'
            },
            // {
            //   title: t('basics.fsFail'),
            //   dataIndex: 'num_of_failed',
            //   minWidth:150,
            //   slotName: 'num_of_failed'
            // },
            {
                title:
                    t('basics.huifu') +
                    '  ' +
                    numList.value.num_of_reply_conversion,
                dataIndex: 'num_of_reply_conversion',
                minWidth: 150,
                align: 'left'
            },
            {
                title:
                    t('basics.huifuNum') +
                    ' ' +
                    numList.value.num_of_reply_rate,
                dataIndex: 'num_of_pop',
                minWidth: 150,
                slotName: 'num_of_pop',
                align: 'left'
            },

            {
                title: t('basics.status'),
                dataIndex: 'status',
                minWidth: 150,
                align: 'left',
                slotName: 'status'
            },
            {
                title: t('basics.controls'),
                dataIndex: 'operate',
                width: 150,
                align: 'left',
                slotName: 'operate'
            }
        ];
    });
};

getNumList();
//   跳转对话
const toConversation = async (id) => {
    try {
        await router.push({ name: 'america:dialogbox', query: { id } });
    } catch (error) {
        if (error.isNavigationFailure) {
            // 处理导航失败的情况
            console.error('Navigation failed due to permissions', error);
        } else {
            proxy.$message.error('没有权限');
        }
    }
};
// 搜索
const searchButton = () => {
    getList();
};
// 获取选择列
const getRowData = (selectedRowKeys) => {};
let tabelsTime = setInterval(() => {
    getList();
}, 30000);

getId();
getList();

onBeforeUnmount(() => {
    clearInterval(timer);
    clearInterval(tabelsTime);
});
</script>
<script>
export default { name: 'cloud:userProject' };
</script>
<style lang="less" scoped>
@import url('@/style/layout.less');
// .app-container {
//     padding-bottom: 20px;
// }
// ::v-deep .dialog-foot {
//     display: flex;
//     justify-content: end;
//     .arco-btn-secondary {
//         color: #000;
//     }
// }
// :deep(.arco-row .arco-form-item-label) {
//     color: #fff;
// }
// .app-container {
//     .container-head {
//         background-color: #282e3b;
//         border-radius: 20px;
//         margin-bottom: 20px;
//         padding: 20px 0px;
//         .btnRefresh {
//             height: 40px;
//             max-width: 200px;
//             border-radius: 20px;
//             display: flex;
//             justify-content: center;
//             align-items: center;
//             font-size: 12px;
//             font-weight: 500;
//             color: #ffffff;
//             cursor: pointer;
//             background: rgba(51, 59, 72, 0.56);
//         }
//         .formButton {
//             display: flex;
//             justify-content: center;
//             align-items: center;
//         }
//     }
//     .container-content {
//         background-color: #282e3b;
//         border-radius: 20px;
//         padding: 16px;
//         .container-content-button {
//             margin-bottom: 10px;

//             .arco-btn {
//                 margin-right: 10px;
//             }
//         }
//     }
// }
// .container-content-header {
//     font-weight: 800;
//     border-radius: 5px 5px 0 0;

//     //   background-color: #333b48;
//     height: 50px;
//     display: flex;
//     justify-content: space-between;
//     align-items: center;
//     .tasks {
//         // color: #000000;
//         font-weight: bold;
//         font-size: 16px;
//         color: #fff;
//         margin-right: 20px;
//     }
//     .refresh {
//         cursor: pointer;
//     }
// }
// .dialog-foot {
//     text-align: end;
// }
// .account-num {
//     padding: 20px 50px 20px 0px;
//     color: #fff;
//     font-size: 16px;
//     display: flex;
//     align-items: center;
//     span {
//         margin-right: 30px;
//         color: red;
//     }
// }
// ::v-deep .arco-table-border .arco-table-tr .arco-table-th {
//     border: none;
//     //   background:red;
// }
// ::v-deep .arco-table-tr td {
//     background: #272c38;
//     color: #fff;
//     border-bottom: none;
// }
// :deep(.arco-pagination-item:hover) {
//     background: #333c4a;
// }
// :deep(.arco-pagination-item-active) {
//     background: #333c4a;
// }
// ::v-deep
//     .arco-table-hover:not(.arco-table-dragging)
//     .arco-table-tr:not(.arco-table-tr-empty):not(.arco-table-tr-summary):hover
//     .arco-table-td:not(.arco-table-col-fixed-left):not(
//         .arco-table-col-fixed-right
//     ),
// .arco-table-hover
//     .arco-table-tr-drag
//     .arco-table-td:not(.arco-table-col-fixed-left):not(
//         .arco-table-col-fixed-right
//     ) {
//     background: #2a3448;
// }

// ::v-deep .arco-table-border .arco-table-container {
//     border: none;
//     // padding: 28px 19px 0;
//     border-radius: 20px;
//     background: #272d39;
// }
// ::v-deep .arco-btn-primary.arco-btn-status-danger.arco-btn-disabled {
//     background: #333c4a;
// }
// ::v-deep .arco-btn-primary.arco-btn-status-danger {
//     background: #333c4a;
// }
// ::v-deep .arco-btn-primary,
// .arco-btn-primary[type='button'],
// .arco-btn-primary[type='submit'] {
//     background: #333c4a;
// }
// ::v-deep .arco-select-view-single {
// }
// ::v-deep .arco-scrollbar {
//     border-radius: 20px !important;
//     background: #353f4f !important;
// }
// ::v-deep .arco-select-dropdown {
//     border-radius: 20px;
//     background-color: #353f4f;
// }
// ::v-deep .selecte {
//     background: #353f4f !important;
//     border-radius: 20px !important;
// }
// //
// ::v-deep .arco-select-dropdown .arco-select-option-selected {
//     background: #353f4f !important;
// }
// ::v-deep .arco-pagination-total {
//     color: #fff;
// }

// ::v-deep .arco-select-dropdown {
//     background-color: #353f4f;
//     border-radius: 16px;
// }

// ::v-deep .arco-table-td {
//     background: #353f4f;
// }
// ::v-deep
//     .arco-table-stripe:not(.arco-table-dragging)
//     .arco-table-tr:not(.arco-table-tr-empty):not(
//         .arco-table-tr-summary
//     ):nth-child(even)
//     .arco-table-td:not(.arco-table-col-fixed-left):not(
//         .arco-table-col-fixed-right
//     ),
// .arco-table-stripe
//     .arco-table-tr-drag
//     .arco-table-td:not(.arco-table-col-fixed-left):not(
//         .arco-table-col-fixed-right
//     ) {
//     background: #272c38;
// }
// ::v-deep .arco-form-item {
//     margin: 0;
// }

// ::v-deep .arco-table-th {
//     background-color: #2a3448;
//     color: #fff;
// }

// :deep(.taskForm .arco-row .arco-form-item-label) {
//     color: #fff;
// }
// :deep(.arco-table-td) {
//     padding: 8px 6px !important;
// }
// .arco-table-th {
//     background-color: transparent;
//     height: 60px;
//     font-weight: 800;
//     color: #fff !important;
// }
// :deep(.arco-pagination-total) {
//     color: #fff;
// }
// :deep(.arco-pagination-item) {
//     color: #fff;
//     background: #333c4a;
// }
// :deep(.arco-pagination-jumper-text-goto, .arco-pagination-jumper-prepend) {
//     color: #fff;
// }
// :deep(.arco-select-view-single) {
//     color: #fff;
// }
// :deep(.arco-input-wrapper) {
//     background: #333c4a;
//     color: #fff;
// }
// :deep(.arco-table-border .arco-table-tr .arco-table-th) {
//     border-bottom: 1px solid transparent;
//     //   background: rgba(209, 230, 255, 0.09);
// }

// :deep(.arco-table-td) {
//     background: rgba(51, 59, 72, 0.6);
// }
// :deep(.arco-table-td) {
//     border: 0px solid rgba(51, 59, 72, 0.6);
// }
// :deep(.arco-table-border .arco-table-container) {
//     border: 0px solid #333b48;
// }
// .arco-table-td {
//     height: 60px;
//     // color: red;
//     background-color: red;
// }
// .app-container {
//     height: 100%;
//     .container-sendSearch {
//         padding: 50px 0;
//         display: flex;
//         justify-content: center;
//         .sendFrom {
//             padding: 10px;
//             width: 35%;
//             height: 300px;
//             border: 1px solid black;
//             border-radius: 20px;
//             display: flex;
//             justify-content: center;
//             .sendFrom-title {
//                 font-size: 16px;
//                 font-weight: 800;
//                 color: #fff;
//             }
//         }
//     }
//     .container-formSearch {
//         padding: 50px 20px 50px;
//         // height: 157px;
//         display: flex;
//         flex-direction: column;
//         gap: 20px;
//         background: rgba(51, 59, 72, 0.56);
//         border-radius: 10px;
//     }
//     .container-content {
//         border-radius: 20px 20px 20px 20px;
//         padding-bottom: 40px;

//         .container-content-button {
//             margin-bottom: 10px;
//         }
//         .container-content-header {
//             font-weight: 800;
//             border-radius: 5px 5px 0 0;

//             //   background-color: #333b48;
//             height: 50px;
//             display: flex;
//             justify-content: space-between;
//             align-items: center;
//             .tasks {
//                 // color: #000000;
//                 font-weight: bold;
//                 font-size: 16px;
//                 color: #fff;
//                 margin-left: 20px;
//                 margin-right: 20px;
//             }
//             .refresh {
//                 cursor: pointer;
//             }
//         }
//         .container-content-bottom {
//             color: red;
//             text-align: end;
//         }
//     }
// }

// .taskForm {
//     .arco-row {
//         :deep(.arco-form-item-label) {
//         }
//         :deep(.arco-input-wrapper) {
//             //   background: #363942;
//         }
//         :deep(.arco-form-item-content-wrapper) {
//             max-width: 260px;
//         }
//         :deep(.arco-select-view-single) {
//         }
//     }
//     :deep(.arco-input-wrapper) {
//     }
//     .btnUpdate {
//         height: 30px;
//         max-width: 100px;
//         border-radius: 6px;
//         display: flex;
//         justify-content: center;
//         align-items: center;
//         font-size: 12px;
//         font-weight: 500;
//         color: #ffffff;
//         cursor: pointer;
//         background: #3976ff;
//     }
//     .btnRefresh {
//         height: 30px;
//         max-width: 100px;
//         border-radius: 6px;
//         display: flex;
//         justify-content: center;
//         align-items: center;
//         font-size: 12px;
//         font-weight: 500;
//         color: #ffffff;
//         cursor: pointer;
//         background: rgba(51, 59, 72, 0.56);
//     }
// }
// :deep(
//         .arco-table-hover:not(.arco-table-dragging)
//             .arco-table-tr:not(.arco-table-tr-empty):not(
//                 .arco-table-tr-summary
//             ):hover
//             .arco-table-td:not(.arco-table-col-fixed-left):not(
//                 .arco-table-col-fixed-right
//             )
//     ) {
//     background: rgba(51, 59, 72, 0.56);
// }
// :deep(.arco-table-th) {
//     color: #fff;
// }
// :deep(.arco-table-td) {
//     color: #fff;
// }
// :deep(.arco-table-td:hover) {
//     background: #3e434e;
// }
// thead {
//     background: #353e4b;
// }
// th {
//     color: #fff !important;
// }
// .arco-table-th {
//     color: #fff !important;
// }

// .btnUpdate {
//     height: 30px;
//     max-width: 100px;
//     border-radius: 6px;
//     display: flex;
//     justify-content: center;
//     align-items: center;
//     font-size: 12px;
//     font-weight: 500;
//     color: #ffffff;
//     cursor: pointer;
//     background: #3976ff;
// }

// .container-header {
//     padding: 20px;
//     background: rgba(51, 59, 72, 0.56);
//     border-radius: 10px;
//     margin-bottom: 0.75rem;
//     .container-header-tr {
//         display: flex;
//         align-items: center;
//     }
//     .container-header-tr > div {
//         margin-right: 20px;
//         display: flex;
//         align-items: center;
//         .s1 {
//             color: #fff;
//             margin-right: 10px;
//         }
//     }
// }
</style>
